/*
 * @Author: hanyu
 * @Date: 2018-05-07 09:46:58 
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2018-12-17 13:54:05
 */
<template>
  <div>
    <chart :noData="noData" :chartStyle="'min-height:230px;height:300px'" :option="dataOption"/>
  </div>
</template>
<script>
import chart from "./newChart";
import _ from "lodash";
/*
多个line图表
value:[{
    name:'',
    value:'',
}]
option:{ //echart 的 option
    legendArr:['',''] //如果有legend ,按照顺序传入 legend 名字
    color: [],//线条颜色数组
    startColor: 【】,开始渐变色数组
    endColor: [], 结束渐变色收
    lineIconId:0,//线上的圈 base64img
    sumName:'',//toolTip上  每个x 单位 总合名称
}
*/
const lineCircleLowBlue =
  "";
const lineCircleBlue =
  "";
const lineCircle =
  "";
const lineIconArr = [lineCircle, lineCircleBlue, lineCircleLowBlue];
const linColorArr = ["blue", "green", "green", "red"];
const startColorArr = ["black", "white"];
// const endColorArr = ["white", "red"];
export default {
  props: {
    value: {
      type: Array,
      default: () => {
        return [];
      }
    },
    option: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  components: {
    chart
  },
  data() {
    return {
      dataOption: {},
      noData: false
    };
  },
  watch: {
    value(newValue, oldValue) {
      if (newValue.length === 0) {
        this.$set(this, "noData", true);
      } else {
        this.$set(this, "noData", false);
        this.setOption(newValue);
      }
    }
  },
  methods: {
    formatterLine(res, params, unit) {
      if (res[0].list) {
        const name = this.option.sumName ? this.option.sumName : "";
        var minResult = "";
        var topItem =
          "<div>" +
          name +
          "</div><p style='margin-top:2px;font-family:DIN Condensed Bold;font-size:20px'>" +
          res[params[0].dataIndex].value +
          "</p>";
        res[params[0].dataIndex].list.forEach(item => {
          var minItem =
            "<div style='display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:0 10px'><span>" +
            item.xData +
            "</span><span style='margin-top:2px;font-family:DIN Condensed Bold;font-size:20px'>" +
            item.value +
            "</span></div>";
          minResult += minItem;
        });
        var imgConStart =
          "<div style='display:flex;padding:12pt 12pt 12pt 12pt;color:" +
          params[0].color +
          ";flex-direction:column;background:rgba(0,0,0,0.7);border-radius:10px'>" +
          topItem +
          "<div style='width:100%;display:flex;align-items:center;justify-content:space-between;flex-direction:row;margin-top:8pt'>";
        var result =
          minResult === ""
            ? imgConStart + "</div>"
            : imgConStart + minResult + "</div>";
        return result;
      } else {
        minResult = "";
        params.forEach(item => {
          var minItem =
            "<div style='display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:0 10px'><span>" +
            item.axisValue +
            "</span><span style='margin-top:2px;font-family:DIN Condensed Bold;font-size:20px'>" +
            item.value +
            "</span></div>";
          minResult += minItem;
        });
        imgConStart =
          "<div style='display:flex;padding:12pt 12pt 12pt 12pt;color:" +
          params[0].color +
          ";flex-direction:column;background:rgba(0,0,0,0.7);border-radius:10px'>" +
          "<div style='width:100%;display:flex;align-items:center;justify-content:space-between;flex-direction:row;margin-top:8pt'>";

        result =
          minResult === ""
            ? imgConStart + "</div>"
            : imgConStart + minResult + "</div>";
        return result;
      }
    },
    setOption(res) {
      var xData = [];
      var unit = "人";
      var length = res.length;
      var allData = []; // 所有数据
      var data1 = {
        data: [],
        name: "",
        type: "line"
      };
      for (let i = 0; i < length; i++) {
        allData.push(data1);
      }
      allData.forEach((allItem, allId) => {
        var lineIcon = this.option.lineIconId
          ? lineIconArr[this.option.lineIconId]
          : lineIconArr[allId];
        var itemColor = this.option.color
          ? this.option.color[allId]
          : linColorArr[allId];
        allItem.itemStyle = {
          normal: {
            color: itemColor
          }
        };
        allItem.areaStyle = {
          normal: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: this.option.startColor
                    ? this.option.startColor[allId]
                    : startColorArr[allId] // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: this.option.endColor
                    ? this.option.endColor[allId]
                    : "rgba(141,76,253,0)" // 100% 处的颜色
                }
              ],
              globalCoord: false // 缺省为 false
            },
            shadowColor: "rgba(0, 0, 0, 0.1)",
            shadowBlur: 10
          }
        };
        allItem.symbol = "image://" + lineIcon;
        allItem.name = res[allId].name;
        res[allId].value.list.forEach(itemList => {
          allItem.data.push(itemList.value);
        });
        res.forEach(qq => {
          const name = qq.name || qq.xData || qq.xData1;
          xData.push(name);
          allItem.data.push(qq.value);
        });
      });
      var option = {
        xAxis: {
          data: xData,
          axisLabel: {
            rotate: 45,
            formatter: function(value, index) {
              return "{value|" + value + "}";
            }
          }
        },
        yAxis: {
          name: this.option.unit || "",
          nameTextStyle: {
            color: "rgb(47,240,210)"
          },
          axisLabel: {
            margin: 2,
            formatter: value => this.$utils.formatterAxisLabel(value)
          }
        },
        tooltip: {
          axisPointer: {
            shadowStyle: {
              color: {
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0,0,0,0)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(0,209,255,0.2)" // 100% 处的颜色
                  }
                ]
              }
            }
          },
          formatter: params => this.formatterLine(res, params, unit)
        },
        grid: {
          bottom: "20%"
        },
        series: allData
      };
      var allOption = _.merge(option, this.option);
      this.$set(this, "dataOption", allOption);
    }
  }
};
</script>

<style scoped>
.noData {
  color: white;
  text-align: center;
  font-size: 20px;
  margin-top: 50px;
}
</style>